<template>
  <div class="container">
    <!-- 表格start -->
    <!-- <view id="panel">
      <view class="flex-fixed">
        <text class="fixed-text">客户</text>
        <text class="fixed-text">产品</text>
        <text class="fixed-text">项目</text>
        <text class="fixed-text">开卡</text>
        <text class="fixed-text">充值</text>
        <text class="fixed-text">合计</text>
      </view>
      <scroll-view
        class="table-content flex"
        scroll-x="true"
        style="width:100%;white-space: nowrap;"
      >
        <view class="db_table" v-for="item in getworkerchanzhiList" :key="item.id">
          <text class="flex-cell td">{{item.name}}</text>
          <text class="flex-cell td">{{item.goods || 0}}</text>
          <text class="flex-cell td">{{item.subject || 0}}</text>
          <text class="flex-cell td">{{item.card || 0}}</text>
          <text class="flex-cell td">{{item.balance || 0}}</text>
          <text class="flex-cell td">{{item.sum}}</text>
        </view>
      </scroll-view>
    </view>-->
    <!-- 表格end -->
    <div class="search_header">
      <div class="search_line flex">
        <picker class="smallsearch" mode="selector" @change="bindShopChange" :value="shopindex" :range="shoplist" range-key="name">
          <view class="picker">{{shopname}}</view>
        </picker>
        <div class="bigsearch flex flex-item">
          <input class="flex-item" type="digit" placeholder="最低消费金额" :model="beginMoney" :value="beginMoney" @input="beginMoneyinput" />
          -
          <input class="flex-item" type="digit" placeholder="最高消费金额" :model="endMoney" :value="endMoney" @input="endMoneyinput" />
        </div>
      </div>
      <div class="search_line flex">
        <div class="bigsearch flex-item flex">
          <picker class="" mode="date" :model="beginTime" start="2015-01-01" end="2099-12-31" @change="beginTimeChange">
            <view class="datachoose flex-item">
              {{beginTime}}
            </view>
          </picker>
          -
          <picker class="" mode="date" :model="endTime" start="2015-01-01" end="2099-12-31" @change="endTimeChange">
            <view class="datachoose flex-item">
              {{endTime}}
            </view>
          </picker>
        </div>
        <div class="smallsearch" @tap="search">查询</div>
      </div>
    </div>
    <view id="panel2" style="margin-top:20px;">
      <view class="flex-cell th" v-if="getworkerchanzhiList.length > 0">
        <text class="flex-cell td">客户</text>
        <text class="flex-cell td">产品</text>
        <text class="flex-cell td">项目</text>
        <text class="flex-cell td">开卡</text>
        <text class="flex-cell td">充值</text>
        <text class="flex-cell td">合计</text>
      </view>
      <scroll-view class="table-content" scroll-y="true" scroll-x="true" style="width:100%;height:600rpx;" v-if="getworkerchanzhiList.length > 0">
        <van-loading type="spinner" class="spinner" size="100px" color="#333" v-if="listshow" />
        <view class="tobody">
          <view class="flex-cell tr" v-for="item in getworkerchanzhiList" :key="item.id">
            <text class="flex-cell td">{{item.name}}</text>
            <text class="flex-cell td">{{item.goods || 0}}</text>
            <text class="flex-cell td">{{item.subject || 0}}</text>
            <text class="flex-cell td">{{item.card || 0}}</text>
            <text class="flex-cell td">{{item.balance || 0}}</text>
            <text class="flex-cell td">{{item.sum}}</text>
          </view>
        </view>
      </scroll-view>
      <Empty message="暂无数据" v-if="getworkerchanzhiList.length == 0"></Empty>
    </view>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import moment from 'moment'
import Toast from '@/utils/toast'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      time_start: '',
      time_end: '',
      time_end2: '',
      start_time_js: '',
      end_time_js: '',
      getworkerchanzhiList: [],
      shoplist: [],
      shopindex: 0,
      shopname: '',
      beginTime: '',
      endTime: '',
      listshow: false,
      beginMoney: '',
      endMoney: '',
      shopid: 0
    }
  },

  components: {
    Empty
  },
  onLoad (e) {
    if (e) {
      this.shopid = e.shopid
    }
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();
    this.time_start = year + '-1-1';
    this.time_end = year + '-' + month + '-' + (day + 1);
    this.time_end2 = year + '-' + month + '-' + day;
    this.start_time_js = moment(this.time_start, 'YYYY-MM-DD').unix();
    this.end_time_js = moment(this.time_end2, 'YYYY-MM-DD').unix();
    console.log(this.end_time_js)
    this.beginTime = moment(new Date()).add('year', 0).format('YYYY-MM-DD');
    this.endTime = moment(new Date()).add('year', 0).format('YYYY-MM-DD');
    this.get_info()
    this.selectshop()
  },
  methods: {
    async get_info () {
      // let shopid = wx.getStorageSync('userInfo').shopid
      this.listshow = true
      let beginTime = moment(this.beginTime, 'YYYY-MM-DD').unix();
      let endTime = moment(this.endTime, 'YYYY-MM-DD').unix();
      const res = await api.getGuestCashConsumeList({ shopid: this.shopid, beginTime: beginTime, endTime: endTime, beginMoney: this.beginMoney, endMoney: this.endMoney });
      if (res) {
        this.getworkerchanzhiList = res
        this.listshow = false
      } else {
        this.getworkerchanzhiList = []
        this.listshow = false
      }
    },
    async selectshop () {
      let orcode = wx.getStorageSync('userInfo').orcode
      const res = await api.selectshop({ orcode: orcode });
      if (res) {
        if (res.code === '100') {
          this.shoplist = res.data
          console.log(this.shoplist[this.shopindex].name)
          this.shopname = this.shoplist[this.shopindex].name
        } else {
          Toast(res.msg)
        }
      } else {
        Toast('接口错误！');
      }
    },
    bindShopChange (e) {
      console.log(e.mp.detail.value)
      this.shopindex = e.mp.detail.value
      this.shopname = this.shoplist[this.shopindex].name
    },
    beginTimeChange (e) {
      console.log(e)
      this.beginTime = e.mp.detail.value;
    },
    endTimeChange (e) {
      console.log(e)
      this.endTime = e.mp.detail.value;
    },
    search () {
      this.get_info()
    },
    beginMoneyinput (e) {
      this.beginMoney = e.mp.detail.value
    },
    endMoneyinput (e) {
      this.endMoney = e.mp.detail.value
    }
  },
  created () {
  },
  onShow () {
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  width: 100%;
}
.td {
  width: 130rpx;
}
.search_header {
  position: relative;
  width: 100%;
  height: 300rpx;
  padding: 0 60rpx;
  background: url(http://mytimg.178mr.com/ellipse.png) 50% 100%/150% no-repeat;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}
/* .search_background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 442rpx;
  background: url(http://mytimg.178mr.com/ellipse@2x.png) no-repeat;
  background-size: 100%;
  z-index: 2;
} */
.bigsearch {
  width: 300rpx;
  height: 80rpx;
  border-radius: 80rpx;
  /* background: #fff url(http://mytimg.178mr.com/dark%20grey@2x.png) no-repeat; */
  background: #fff;
  background-size: 30rpx;
  background-position: 90% 50%;
  line-height: 80rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.smallsearch {
  width: 260rpx;
  height: 80rpx;
  border-radius: 80rpx;
  /* background: #fff url(http://mytimg.178mr.com/dark%20grey@2x.png) no-repeat; */
  background: #fff;
  background-size: 30rpx;
  background-position: 90% 50%;
  line-height: 80rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 20rpx;
}
.search_line {
  margin-bottom: 30rpx;
}
.search_line:last-child {
  margin-bottom: 0;
}
.datachoose {
  text-align: center;
}
.table-content {
  position: relative;
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
<style>
.empty {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
